<template>
  <el-row :gutter="10" class="panel-group">
    <el-col :xs="24" :sm="24" :lg="8" class="card-panel-col" v-for="(list,i) in lists" :key="i">
      <div class="card-panel" :style="{background:list.color}">
        <div class="card-panel-description">
          <div class="card-panel-text">
             {{list.name}}
          </div>
          <count-to :start-val="list.startVal" :end-val="list.endVal" :duration="list.duration" class="card-panel-num" />
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import CountTo from 'vue-count-to' //数字滚动插件

export default {
  data(){
    return {
    }
  },
  computed:{
    lists(){
      return [
            {startVal:0,endVal:8888,duration:4000,name:this.$t('message.title'),color:'#7ad3ff'},
            {startVal:0,endVal:8888,duration:4000,name:this.$t('message.title2'),color:'#f60'},
            {startVal:0,endVal:8888,duration:4000,name:this.$t('message.title'),color:'#ff9c9c'},
            {startVal:0,endVal:8888,duration:4000,name:this.$t('message.title2'),color:'#ff9c9c'},
            {startVal:0,endVal:8888,duration:4000,name:this.$t('message.title'),color:'#7ad3ff'},
            {startVal:0,endVal:8888,duration:4000,name:'企业回报率',color:'#f60'}
        ]
    }
  },
  components:{
    CountTo
  }
}
</script>

